<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/left.css">
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/bootstrap.min.js" type="text/javascript"></script>
    <script src="js/vue.js"></script>
    <style>

        .mrow{margin-top:15px;padding:5px 15px;}
        .msg{padding-top:10px;font-size:16px;font-weight: bold}
        .file{opacity: 0;width:0;height:0;position:absolute;top:0;left:0;z-index:-1}

    </style>
    <title>驾校信息管理</title>
    <script>
        window.onload=function(){
//r.reverseList[cindex].id
            var vue = new Vue({
                el:'#app',
                data:{
                    url:'http://localhost:8889',
                    school:{}
                },
                methods:{
                    getSchool:function(){
                        var that = this;
                       $.getJSON(that.url+'/school/find/1',function(data){
                           that.school = data;
                           console.log(that.school)
                           if(data.spice) {

                               $(".thumbnail>img:eq(0)").attr("src", that.url+"/images/"+that.school.id +"/"+data.spice);
                               $(".thumbnail>img:eq(1)").attr("src", that.url+"/images/"+that.school.id +"/"+data.spiceb);
                               $(".thumbnail>img:eq(2)").attr("src", that.url+"/images/"+that.school.id +"/"+data.spicec);
                               $(".thumbnail>img:eq(3)").attr("src", that.url+"/images/"+that.school.id +"/"+data.spiced);
                           }else{
                               console.log("照片不存在")
                           }
                       })
                    },
                    save:function(){
                        var that = this;
                        var info = {
                            id: 1,
                            name: that.school.name,
                            linkman:that.school.linkman,
                            phone:that.school.phone,
                            plane:that.school.plane,
                            address:that.school.address,
                            content:that.school.content,
                            status:1

                        }
                        $.getJSON(that.url+"/school/save",info,function(data){
                            if(data !=null) {
                                $("#msg").html("<span style='color:darkgreen'>教练基本信息保存成功！</span>");
                            }else{
                                $("#msg").html("<span style='color:red'>教练基本信息保存失败，请重试！</span>");
                            }

                        })

                    }

                }
            })
            vue.getSchool();
            $("#header").load("header.html");
            $("#left").load("left.html");
            //点击图片实现上传功能
            $(".thumbnail").click(function(){
                var $file = $(this).parent().find(".file");//找到 input标签然后单击事件
                $file.click();
            })
            //图片预览
            $(".file").change(function(){
                //获取文件选择器选择的第一个图片
                var file = this.files[0];
                console.log("获取图片"+this.files[0])
                //找到img标签
                var $img = $(this).parent().find("img");
                //用来把文件读入内存，并且读取文件中的数据
                var reader = new FileReader();
                //读取文件后的回调函数
                reader.onloadend = function () {
                    $img.attr("src",reader.result);
                }
                if(file){
                    reader.readAsDataURL(file);
                }else{
                    $img.attr('src','images/subject/bg6.jpg');
                }
            })
            //执行文件上传操作
            $("#btnup").click(function () {
                if(vue.school.id !=null){
                    //表单键值对
                    var fd = new FormData();
                    fd.append("id",vue.school.id);
                    fd.append("picture",$(".file")[0].files[0]);
                    fd.append("pictureb",$(".file")[1].files[0]);
                    fd.append("picturec",$(".file")[2].files[0]);
                    fd.append("pictured",$(".file")[3].files[0]);
                    console.log($(".file")[0].files[0])
                    console.log(fd)
                    $.ajax({
                        url:'http://localhost:8889/school/uploads',
                        type:'POST',
                        data:fd,
                        cache: false,
                        contentType:false,
                        processData:false,
                        success:function(data){
                            if(data){
                                alert("图片上传成功")
                            }else{
                                $(".upmsg").html("<span style='color:red;'>图片上传失败11111，请重试！</span>");

                            }
                        },
                        error:function(data){
                            $(".upmsg").html("<span style='color:red;'>图片上传失败，请重试！</span>");
                        }
                    })

                }else{
                    alert("请先保存驾校基本信息")
                }

            })

        }
    </script>

</head>
<body>
<div class="container-fluid bgcon" id="app">
    <!-- 表头-->
    <div class="row" id="header">

    </div>
    <!--内容体-->
    <div class="row">

        <!-- 左边菜单-->
        <div class="col-md-2" id="left">

        </div>
        <!-- 左边内容体-->
        <div class="col-md-9" style="margin-left:30px;margin-top:10px">

            <div class="row tithead">
                <div class="col-md-4"><h3 class="glyphicon glyphicon-bed"> 驾校基本信息管理
                </h3></div>
                <div class="col-md-6"></div>

                <div class="col-md-2" >

                </div>

            </div>

            <div class="row">
                <div class="col-md-12">

                    <div>
                        <!-- 导航栏 -->
                        <ul class="nav nav-tabs" role="tablist"style="marign-bottom:20px;margin-top:10px">
                            <li role="presentation" class="active">
                                <a href="#school" aria-controls="coa" role="tab" data-toggle="tab">驾校基本信息</a>
                            </li>
                            <li role="presentation">
                                <a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">驾校图片</a>
                            </li>
                        </ul>
                        <div class="row"style="height:20px"></div>
                        <!-- 身体 -->
                        <div class="tab-content" style="marign-top:10px">

                            <div role="tabpanel" class="tab-pane active" id="school">

                                <div class="row">
                                    <div class="form-group mrow col-md-6">
                                        <div class="input-group">
                                            <label class="input-group-addon">驾校名称</label>
                                            <input v-model="school.name" class="form-control" placeholder="请输入驾校名称">
                                        </div>
                                    </div>
                                    <div class="form-group mrow col-md-6">
                                        <div class="input-group">
                                            <label class="input-group-addon">联系人</label>
                                            <input v-model="school.linkman" class="form-control" placeholder="请输入联系人姓名">
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="form-group mrow col-md-6">
                                        <div class="input-group">
                                            <label class="input-group-addon">手机号码</label>
                                            <input v-model="school.phone" class="form-control"  placeholder="请输入手机号码">
                                        </div>
                                    </div>
                                    <div class="form-group mrow col-md-6">
                                        <div class="input-group">
                                            <label class="input-group-addon">座机号码</label>
                                            <input v-model="school.plane"class="form-control"  placeholder="请输入座机号码">
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="form-group mrow col-md-6">
                                        <div class="input-group">
                                            <label class="input-group-addon">驾校地址</label>
                                            <input v-model="school.address"class="form-control" placeholder="请确认驾校地址">
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <h3 class="panel-heading">驾校详细信息</h3>
                                    <hr>
                                    <textarea v-model="school.content" class="form-control" rows="7" cols="50`" style="font-size: 18px"></textarea>
                                </div>


                                <div class="row mrow" style="margin-top:100px">
                                    <div class="col-md-10">
                                        <p class="text-center msg"id="msg"></p>
                                    </div>
                                    <div class="col-md-2">
                                        <button @click="save" class="btn btn-primary btn-block">保存</button>
                                    </div>
                                </div>

                            </div>

                            <div role="tabpanel" class="tab-pane" id="profile">
                                <div class="row mrow">
                                    <div class="col-xs-6 col-md-3">
                                        <input type="file" class="file">
                                        <a href="#" class="thumbnail">
                                            <img src="images/subject/bg6.jpg" alt="" class="img">
                                        </a>
                                    </div>
                                    <div class="col-xs-6 col-md-3">
                                        <input type="file" class="file">
                                        <a href="#" class="thumbnail">
                                            <img src="images/subject/bg6.jpg" alt=""class="img">
                                        </a>
                                    </div>
                                    <div class="col-xs-6 col-md-3">
                                        <input type="file" class="file">
                                        <a href="#" class="thumbnail">
                                            <img src="images/subject/bg6.jpg" alt=""class="img">
                                        </a>
                                    </div>
                                    <div class="col-xs-6 col-md-3">
                                        <input type="file" class="file">
                                        <a href="#" class="thumbnail">
                                            <img src="images/subject/bg6.jpg" alt=""class="img">
                                        </a>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-10">
                                            <p class="upmsg"></p>
                                        </div>
                                        <div class="col-md-2">
                                            <button id="btnup" class="btn btn-primary btn-block">上传图片</button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>

                    </div>
                </div>
            </div>
            <div class="row text-right remark"><h5>备注：驾校详细信息录入</h5></div>
        </div>
    </div>
</div>
</body>
</html>